{% extends "base.html" %}

{% block content %}
<div class="card">
    <h2><i class="fas fa-heartbeat"></i> 欢迎使用医学教育虚拟助手</h2>
    <p class="welcome-text">
        这是一个专为医学生和医疗专业人员设计的智能学习平台，提供全方位的医学教育支持。
    </p>
    
    <div class="features-grid">
        <div class="feature-card">
            <div class="feature-icon">
                <i class="fas fa-comments"></i>
            </div>
            <h3>智能问答</h3>
            <p>解答您的医学问题，提供详细解释和相关知识链接。</p>
            <a href="{{ url_for('chat') }}" class="btn">开始使用</a>
        </div>
        
        <div class="feature-card">
            <div class="feature-icon">
                <i class="fas fa-road"></i>
            </div>
            <h3>学习路径</h3>
            <p>根据您的水平和目标定制个性化学习计划。</p>
            <a href="{{ url_for('learning_path') }}" class="btn">查看路径</a>
        </div>
        
        <div class="feature-card">
            <div class="feature-icon">
                <i class="fas fa-procedures"></i>
            </div>
            <h3>虚拟病例</h3>
            <p>通过真实病例练习临床诊断和决策能力。</p>
            <a href="{{ url_for('case_studies') }}" class="btn">开始练习</a>
        </div>
        
        <div class="feature-card">
            <div class="feature-icon">
                <i class="fas fa-clipboard-check"></i>
            </div>
            <h3>知识评估</h3>
            <p>测试您的医学知识掌握情况，发现薄弱环节。</p>
            <a href="{{ url_for('assessment') }}" class="btn">开始测试</a>
        </div>
    </div>
    
    <div class="quick-stats">
        <div class="stat-item">
            <h4>医学知识库</h4>
            <p>1000+ 个医学主题</p>
        </div>
        <div class="stat-item">
            <h4>虚拟病例库</h4>
            <p>200+ 个临床案例</p>
        </div>
        <div class="stat-item">
            <h4>评估题库</h4>
            <p>5000+ 道测试题目</p>
        </div>
    </div>
    
    <div class="recent-activity">
        <h3>最近学习活动</h3>
        {% if session['user_data']['test_history'] %}
        <ul class="activity-list">
            {% for activity in session['user_data']['test_history'][:3] %}
            <li>
                <span class="activity-date">{{ activity.date }}</span>
                <span class="activity-desc">{{ activity.type }} - 得分: {{ activity.score }}</span>
            </li>
            {% endfor %}
        </ul>
        {% else %}
        <p>暂无最近学习记录，开始您的学习之旅吧！</p>
        {% endif %}
    </div>
</div>

<style>
.welcome-text {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    color: var(--dark-color);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.feature-card {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.feature-card:hover {
    transform: translateY(-5px);
}

.feature-icon {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.feature-card h3 {
    margin-bottom: 0.5rem;
    color: var(--dark-color);
}

.feature-card p {
    margin-bottom: 1rem;
    color: #666;
}

.quick-stats {
    display: flex;
    justify-content: space-around;
    background: var(--light-color);
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
}

.stat-item {
    text-align: center;
}

.stat-item h4 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.stat-item p {
    font-weight: bold;
    color: var(--dark-color);
}

.recent-activity {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.activity-list {
    list-style: none;
}

.activity-list li {
    padding: 0.8rem 0;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
}

.activity-list li:last-child {
    border-bottom: none;
}

.activity-date {
    color: #666;
}

.activity-desc {
    font-weight: 500;
}

@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .quick-stats {
        flex-direction: column;
        gap: 1rem;
    }
}
</style>
{% endblock %}